<!--
 * @Author: yantong 11608542+yan_tongone@user.noreply.gitee.com
 * @Date: 2022-12-28 15:34:25
 * @LastEditors: yantong 11608542+yan_tongone@user.noreply.gitee.com
 * @LastEditTime: 2023-01-10 13:54:22
 * @FilePath: \vue-admin-template-master\src\views\employees\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="top-card">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-alert
              :title="`当前共有${total}条记录`"
              type="info"
              show-icon
              class="info-alert"
            >
            </el-alert>
          </el-col>
          <el-col :span="18" class="rightCol">
            <el-button type="danger" size="mini">普通excel导出</el-button>
            <el-button type="warning" size="mini">负责excel导出</el-button>
            <el-button type="success" size="mini" @click="$router.push('/import?type=user')">excel导入</el-button>
            <el-button type="primary" size="mini" :disabled="true"
              >新增员工</el-button
            >
          </el-col>
        </el-row>
      </el-card>

      <el-card>
        <table-view
          :tableData="tableData"
          :total="total"
          :page="page"
          :size="size"
          @handleChange="handleChange"
        ></table-view>
      </el-card>

      <upload-excel></upload-excel>
    </div>
  </div>
</template>
<script>
import { getEmployessList } from "@/api/user";
import TableView from "./component/TableView.vue";
import UploadExcel from './component/UploadExcel.vue';
export default {
  install(Vue){
    // 注册导入excel组件
    Vue.components('UploadExcel',UploadExcel)
  },
  components: { TableView,  },
  data() {
    return {
      total: 0,
      tableData: [],
      // 节流防抖
      loading: false,
      //   分页
      page: 1,
      size: 10,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      this.loading = true;
      let res = await getEmployessList({ page: this.page, size: this.size });
      console.log(res, "res");
      this.loading = false;
      this.total = res.total;
      this.tableData = res.rows;
    },

    // 分页
    handleChange(val) {
      this.page = val;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.top-card {
  .info-alert {
    width: 300px;
  }
  .rightCol {
    text-align: right;
  }
}
</style>
